<template>
	<view>
		<uni-icons class="back" type="left" size="25px" @click="goback()" :style="[{'position':'absolute'},{'z-index':'3'},{'margin-left':'15px'},{'position':'fixed'}]" color="#ffffff"></uni-icons>
		<view  class="show_view" style="width: 100%;">
			<image class="titleimg" lazy-load="true" mode='aspectFill' :src="httpurl+activity_detail.a_cover"></image>
			<view  class="titleimg" style=" position:absolute;z-index:3;top:0%; text-align:left;">
				<view style="margin-top: 38%; margin-left: 25px;">
					<uni-title type="h1" :title="activity_detail.a_name" align="left"  color="#ffffff"></uni-title>
					<view style="color:#ffffff ;font-size:15px ;">{{'类型 : '+type_name[activity_detail.type_id-1]}}</view>
					<view style="color:#ffffff ;font-size:15px ;">{{'地点 : '+activity_detail.a_place}}</view>
				</view>	
			</view>
			<view class="titleimg" style="background-color: #000000; opacity:0.45; position:absolute;z-index:2;top:0%; text-align:center;">		
			</view>
		</view>
		<view style="display: flex; flex-direction:column;width: 100%; justify-content: center;font-size: 14px;font-weight: 300;margin-top: 15px;">
			<view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;border-top: solid #e6e6e6 0.7px;">
				<view style="font-size: 17px;font-weight: 500;margin-top: 15px;">时间范围</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;">
					<view>报名时间</view>
					<view>{{gettimerange(activity_detail.a_T_deadline,activity_detail.a_S_deadline)}}</view>
				</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
					<view>活动时间</view>
					<view>{{gettimerange(activity_detail.a_start_time,activity_detail.a_end_time)}}</view>
				</view>
			</view>
			<view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
				<view style="font-size: 17px;font-weight: 500;margin-top: 15px;">积分设置</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
					<view>活动积分</view>
					<view>{{activity_detail.a_score+'分'}}</view>
				</view>
			</view>
			<view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
				<view style="font-size: 17px;font-weight: 500;margin-top: 15px;">规则要求</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;">
					<view>签到方式</view>
					<view>密码签到</view>
				</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
					<view>限制人数</view>
					<view>{{activity_detail.a_max_number+'人'}}</view>
				</view>
			</view>
			<view style="width: 90%; align-self: center;border-bottom: solid #e6e6e6 0.7px;">
				<view style="font-size: 17px;font-weight: 500;margin-top: 15px;">活动介绍</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 10px;">
					<view>活动标签</view>
					<view>{{type_name[activity_detail.type_id-1]}}</view>
				</view>
				<view style="display: flex; flex-direction:row; justify-content:space-between;margin-top: 5px;margin-bottom: 15px;">
					<view>活动简介</view>
					<view>{{activity_detail.a_describe}}</view>
				</view>
			</view>
			<button @click="publish_sign()">发布签到</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				httpurl: getApp().globalData.weburl, //app.vue中定义的全局变量，后端ip地址
				a_id:'',
				activity_detail:{},
				seen:false,
				isEnroll:'',
				isSign:'',
				state:'',
				type_name:["文体活动","艺术活动","心理活动","体育活动","IT技能","摄影技能","英语活动","郊游活动"],
			}
		},
		onLoad: function (option) {
		    this.activity_detail=JSON.parse(option.activity_information);
			  console.log(this.activity_detail);
		},
		computed:{
			gettimerange() {
			    return (time1,time2) => {
					time1=time1.replaceAll('-','.');
					time2=time2.replaceAll('-','.');
					return time1.substr(0, 16)+" - "+time2.substr(0, 16);
			    }
			}
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			publish_sign(){
			 var that=this;
			 uni.request({
			     url: that.httpurl+'publishSign/', //服务器地址+接口名
			     data: {
			     A_id:that.activity_detail.a_id,
			     },
			  method: 'POST',
			     header: { 
			   'X-Requested-With': 'XMLHttpRequest',
			   "Accept": "application/json",
			   "Content-Type": "application/json; charset=UTF-8"
			  },
			  dataType: 'json',
			     success: (res) => {
			   console.log("request success");
			         console.log(res.data);
					 uni.showToast({
					 	title:res.data.key_number
					 })
			
			     },
			  fail: (res) => {
			   console.log("request fail");
			     },
			 });
			 },
		
			goback(){
				console.log("返回")
				uni.navigateBack({
					delta: 1,
				});
			}
		}
	}
</script>

<style>
	.back {
        top: var(--status-bar-height);
    }
	.show_view{
		position:relative;
		z-index:1;
		margin:0 auto; 
	}
	.titleimg{
		width: 100%;
		height: 260px;
	}
	.bottom_btn{
		width: 90%;
		height: 50px;
		align-self: center;
		margin-top: 40px;
		border-radius: 5px;
		color: #ffffff;
		background-color: #528FFF;
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		line-height: 50px;
	}
</style>
